<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>播放列表</title>
    <link rel="stylesheet" href="<%= request.getContextPath() %>/static/plugins/bootstrap-4.6.2-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="<%= request.getContextPath() %>/static/plugins/bootstrap-icons-1.11.3/font/bootstrap-icons.min.css">
    <style>
        /* 设置背景图 */
        body {
            background-image: url('<%= request.getContextPath() %>/static/images/background/img_1.png');
            background-size: cover; /* 背景图铺满整个页面 */
            background-position: center; /* 背景图居中 */
            background-repeat: no-repeat; /* 防止背景图重复 */
            height: 100vh; /* 高度设置为视口高度 */
            margin: 0;
        }

        .container {
            background-color: rgba(255, 255, 255, 0.8); /* 背景透明 */
            border-radius: 10px;
            padding: 20px;
        }

        .list-group-item {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 5px;
        }
        .footer-btn {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
        }
        .song-info {
            margin-top: 10px;
        }
        .song-info .description {
            font-size: 0.9em;
            color: #555;
        }
        .song-info .category, .song-info .uploader {
            font-size: 0.8em;
            color: #888;
        }
    </style>
</head>
<body>
<div class="container mt-5">
    <h1 class="mb-4">播放列表</h1>

    <div class="row">
        <div class="col-12">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th scope="col">
                        选择播放
                    </th>
                    <th scope="col">序号</th>
                    <th scope="col">歌曲id</th>
                    <th scope="col">歌名</th>
                    <th scope="col">歌曲描述</th>
                    <th scope="col">上传者id</th>
                    <th scope="col">分类</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${sessionScope.songs}" var="song" varStatus="status">
                    <tr>
                        <td><input type="checkbox" class="song-checkbox" data-song-id="${song.songId}"></td>
<%--                        <td><input type="checkbox" class="song-checkbox" data-song-id="${song.songId}" data-title="${song.title}" data-description="${song.description}" data-uploader-id="${song.uploaderId}" data-category="${song.categoryId}"></td>--%>
                        <th scope="row">${status.index + 1}</th>
                        <td>${song.songId}</td>
                        <td>${song.title}</td>
                        <td>${song.description}</td>
                        <td>${song.uploaderId}</td>
                        <td>${song.categoryId}</td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
    <div class="row mt-4">
        <div class="col-6">
            <button id="playBtn" class="btn btn-primary btn-block">播放</button>
        </div>
        <div class="col-6">
            <a href="<%= request.getContextPath() %>/musicBoxes/musicBoxes.jsp" class="btn btn-secondary btn-block">返回音乐盒</a>
        </div>
    </div>
    <a href="<%= request.getContextPath() %>/" class="btn btn-secondary footer-btn">返回主页</a>
</div>

<script src="<%=request.getContextPath()%>/static/plugins/jquery/jquery.min.js"></script>
<script src="<%=request.getContextPath()%>/static/plugins/bootstrap-4.6.2-dist/js/bootstrap.bundle.js"></script>
<script src="<%=request.getContextPath()%>/static/js/util.js"></script>
<script src="<%=request.getContextPath()%>/static/js/playlists/playlists.js"></script>
<script>

</script>
</body>
</html>
